import { Menu, Switch } from "antd";
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import "./index.less";
import Home from "./Home";
import Koubei from "./Koubei";

const Screen = () => {
  const navigate = useNavigate();
  const menu = [
    { name: '综合首页', path: '/index', float: 'float-left',element:<Home/> },
    { name: '客流监测', path: '/tourist', float: 'float-left' },
    { name: '车辆监测', path: '/scenic', float: 'float-left' },
    { name: '视频监测', path: '/scenic', float: 'float-left' },
    { name: '票务监测', path: '/video', float: 'float-right' },
    { name: '网络口碑', path: '/koubei', float: 'float-right' ,element:<Koubei/> },
    { name: '旅游舆情', path: '/team', float: 'float-right' },
  ];
  const [menuIndex, setNenuIndex] = useState(0);
  const [menuPath, setMenuPath] = useState('/index');
  const isHref = (val: string) => {
    return window.location.href.indexOf(val) != -1;
  };
  return (
    <div className="screen_bg">
      <div className={"header_bg"}>
        <div
          className="logo"
          onClick={(e) => {
            navigate("/home");
          }}
        >
          综合驾驶舱
        </div>
        <div className=" top_menu_box w-full">
        {menu.map((item, index) => (
          <div
            key={index}
            className={`${(item.path)==menuPath ? 'active' : ''} ${item.float}`}
            onClick={() =>{ 
              setNenuIndex(index)
              setMenuPath(item.path)
            }}
          >
            <div >{item.name}</div>
          </div>
        ))}
      </div>
      </div>
      <div className="screen_content">
        {
          menu[menuIndex].element
        }
      </div>
    </div>
  );
};
export default Screen;
